<template>
    <div class="nest">
        <el-form class="search-form" inline size="mini">
            <el-form-item>
                <el-select v-model="search.status" placeholder="状态" clearable @change="getList">
                    <el-option label="全部" :value="-1" />
                    <el-option label="待审核" :value="0" />
                    <el-option label="提现成功" :value="1" />
                    <el-option label="提现失败" :value="2" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-input v-model="search.user_id" placeholder="用户id" clearable @change="getList" />
            </el-form-item>
            <!-- <el-form-item>
                <el-input v-model="search.username" placeholder="输入会员等级" clearable @change="getList" />
            </el-form-item> -->
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">查询</el-button>
                <el-button icon="el-icon-refresh-left" size="mini" @click="handleResetSearch">重置</el-button>
            </el-form-item>
            <Recharge ref="Recharge" @success="getList"></Recharge>
        </el-form>
        <div class="table">
            <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" v-loading="loading">
                <el-table-column prop="sn" label="单号" width="250" show-overflow-tooltip>
                </el-table-column>
                <!-- <el-table-column label="用户信息" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-image :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]" style="width: 60px" />
                    </template>
</el-table-column> -->
                <el-table-column prop="real_name" label="真实姓名" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="account" label="提现账号" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="change_amount" label="提现金额" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="status" label="提现状态" show-overflow-tooltip>
                    <template #default="{ row }">
                        <el-tag type="warning" v-if="row.status == 0">
                            待审核
                        </el-tag>
                        <el-tag v-if="row.status == 1">
                            提现成功
                        </el-tag>
                        <el-tag type="danger" v-if="row.status == 2">
                            提现失败
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="created_at" label="提现时间" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="操作" width="180" fixed="right">
                    <template #default="{ row }">
                        <el-button v-if="row.status == 0" type="text"
                            @click="$refs.Recharge.handleEdit(row)">审核</el-button>

                        <el-button v-if="row.status == 2" type="text" link @click="showReason(row.reason)">
                            失败原因
                        </el-button>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini"
                            @click="$refs.Recharge.handleEdit(scope.row)">充值</el-button>
                        <el-button size="mini" @click="queryDetailed(scope.row)">明细</el-button>
                    </template>
                </el-table-column> -->
            </el-table>
            <div style="text-align: right;">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="search.page" :page-sizes="[10, 20, 30, 40, 100]" :page-size="search.size" background
                    layout="total, sizes, prev, pager, next" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import Recharge from "./recharge.vue"

export default {
    components: { Recharge },
    data() {
        return {
            loading: false,
            search: {
                status: -1,	//true	string		状态
                user_id: "",	//true	string		用户id
                page: 1,	//true	int		当前页
                size: 10,	//true	int		每页多少条
            },
            tableData: [],
            total: 0,
        }
    },
    created() {
        this.getList()
    },
    methods: {
        queryDetailed(data) {
            this.$router.push({ name: 'withdrawal-list-detailed', query: { user_id: data.id } })
        },
        showReason(reason) {
            this.$alert(reason, '驳回原因', {
                confirmButtonText: '确定',
            });
        },
        // 提现记录
        async getList() {
            this.loading = true
            let res = await this.$request({
                url: '/admin/user.user/withdrawalOrder',
                method: 'get',
                params: this.search
            })
            this.loading = false
            if (res.code == 200) {
                this.tableData = res.result.data
                this.total = res.result.total
            }
        },
        handleResetSearch() {
            this.search = {
                status: -1,	//true	string		状态
                user_id: "",	//true	string		用户id
            }
            this.getList()
        },
        //分页
        handleSizeChange(e) {
            this.search.size = e;
            this.getList()
        },
        handleCurrentChange(e) {
            this.search.page = e;
            this.getList()
        },
    }
}
</script>

<style lang="scss">
.nest {
    width: 100%;
    height: 60px;

    .search-form {
        background: #fff;
        border-radius: 12px;
        padding: 12px 20px;
        margin-bottom: 20px;

        .el-form-item--mini.el-form-item {
            margin-bottom: 0;
        }
    }

    .table {
        padding: 12px 20px;
        background: #fff;

        .el-table__body-wrapper {
            max-height: calc(100vh - 300px);
            overflow-y: auto;
        }
    }
}
</style>
